import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { User, Settings, Heart, BookOpen, Camera, Award } from 'lucide-react'
import UserProfile from '../components/UserProfile'
import { OperaBackground } from '../components/OperaCharacter'

const UserCenter = () => {
  const [activeTab, setActiveTab] = useState('profile')
  const [user] = useState({
    name: '京剧传承者',
    email: 'jingju@example.com',
    joinDate: '2024-01-15',
    level: '高级',
    avatar: '/api/placeholder/100/100',
    stats: {
      posts: 42,
      likes: 128,
      followers: 89,
      following: 156
    }
  })

  const tabs = [
    { id: 'profile', label: '个人资料', icon: User },
    { id: 'settings', label: '设置', icon: Settings },
    { id: 'favorites', label: '收藏', icon: Heart },
    { id: 'history', label: '历史', icon: BookOpen },
    { id: 'uploads', label: '上传', icon: Camera },
    { id: 'achievements', label: '成就', icon: Award }
  ]

  const renderTabContent = () => {
    switch (activeTab) {
      case 'profile':
        return (
          <div className="space-y-6">
            <UserProfile user={user} />
            
            {/* 用户统计 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="grid grid-cols-2 md:grid-cols-4 gap-4"
            >
              {[
                { label: '发布内容', value: user.stats.posts, color: 'from-opera-red to-opera-pink' },
                { label: '获得点赞', value: user.stats.likes, color: 'from-opera-blue to-opera-mint' },
                { label: '粉丝', value: user.stats.followers, color: 'from-opera-yellow to-opera-gold' },
                { label: '关注', value: user.stats.following, color: 'from-opera-mint to-opera-blue' }
              ].map((stat, index) => (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: 0.3 + index * 0.1 }}
                  className={`bg-gradient-to-br ${stat.color} p-4 rounded-xl text-center text-opera-white`}
                >
                  <div className="text-2xl font-bold jing-title">{stat.value}</div>
                  <div className="text-sm jing-content">{stat.label}</div>
                </motion.div>
              ))}
            </motion.div>
          </div>
        )
      
      case 'settings':
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-opera-red/20"
          >
            <h3 className="text-xl font-bold text-opera-white jing-title mb-4">账户设置</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-opera-white jing-content mb-2">通知设置</label>
                <div className="space-y-2">
                  <label className="flex items-center text-opera-white jing-content">
                    <input type="checkbox" className="mr-2" defaultChecked />
                    新消息通知
                  </label>
                  <label className="flex items-center text-opera-white jing-content">
                    <input type="checkbox" className="mr-2" defaultChecked />
                    点赞通知
                  </label>
                  <label className="flex items-center text-opera-white jing-content">
                    <input type="checkbox" className="mr-2" />
                    邮件通知
                  </label>
                </div>
              </div>
            </div>
          </motion.div>
        )
      
      case 'favorites':
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-opera-red/20"
          >
            <h3 className="text-xl font-bold text-opera-white jing-title mb-4">我的收藏</h3>
            <p className="text-opera-white/70 jing-content">暂无收藏内容</p>
          </motion.div>
        )
      
      default:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-opera-red/20"
          >
            <h3 className="text-xl font-bold text-opera-white jing-title mb-4">
              {tabs.find(tab => tab.id === activeTab)?.label}
            </h3>
            <p className="text-opera-white/70 jing-content">功能开发中...</p>
          </motion.div>
        )
    }
  }

  return (
    <div className="min-h-screen theme-creator relative overflow-hidden">
      <OperaBackground />
      
      <div className="relative z-10 container mx-auto px-4 py-8">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-8"
        >
          <h1 className="text-4xl font-bold text-opera-white jing-title mb-2">
            用户中心
          </h1>
          <p className="text-opera-white/70 jing-content">
            管理您的账户信息和偏好设置
          </p>
        </motion.div>

        <div className="max-w-6xl mx-auto">
          {/* 标签导航 */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="flex flex-wrap justify-center gap-2 mb-8"
          >
            {tabs.map((tab) => {
              const Icon = tab.icon
              return (
                <motion.button
                  key={tab.id}
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all ${
                    activeTab === tab.id
                      ? 'bg-opera-red text-opera-white'
                      : 'bg-white/10 text-opera-white/70 hover:bg-white/20'
                  }`}
                >
                  <Icon className="w-4 h-4" />
                  <span className="jing-content">{tab.label}</span>
                </motion.button>
              )
            })}
          </motion.div>

          {/* 内容区域 */}
          <motion.div
            key={activeTab}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3 }}
          >
            {renderTabContent()}
          </motion.div>
        </div>
      </div>
    </div>
  )
}

export default UserCenter

